<template>
    <div style="" class="main" >
      <div class="one_pie_box">
        <!-- <div id="chartLine" class="one_line"></div> -->
        <!-- 柱状图 -->
        <!-- <div id="Columnar" class="line-columnar"></div> -->
        <el-tabs v-model="CityRankingData.label" style="margin-left:2%;margin-right:2%;" @tab-click="getMainDatas">
            <!-- <el-tab-pane label="销售总额" name="1"></el-tab-pane> -->
            <el-tab-pane label="总债权" name="1"></el-tab-pane>
            <el-tab-pane label="总订单数" name="2"></el-tab-pane>
            <el-tab-pane label="总利息" name="3"></el-tab-pane>
            <el-tab-pane label="总服务费" name="4"></el-tab-pane>
          </el-tabs>
          <div class="rank">
            <div class="gd">
              <el-tabs v-model="CityRankingData.type"   @tab-click="getMainDatas">
                <el-tab-pane label="全部" name="1"></el-tab-pane>
                <el-tab-pane label="本周" name="2"></el-tab-pane>
                <el-tab-pane label="本月" name="3"></el-tab-pane>
                <el-tab-pane label="本季度" name="4"></el-tab-pane>
                <el-tab-pane label="全年" name="5"></el-tab-pane>
              </el-tabs>
            </div>
            <div class="defualt">
              <el-date-picker
                @change="getMainDatas"
                v-model="CityRankingData.defaultDate"
                type="daterange"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']">
              </el-date-picker>
            </div>
          </div>
        <div class="one_line_box">
          
          <div id="Columnar" class="line-columnar"></div>
          <hr class="hr"/>
         
        </div>
        <div class="clear"></div>
      </div>
    </div>
</template>


<script>
    import {
      formatDate
    } from '@/utils/formatDate.js';
    import * as echarts from 'echarts';
    import {
      getNodes
    } from '@/utils'
    require('echarts/theme/macarons');//引入主题
    require('echarts/theme/shine');//引入主题
    import {
      getRegion,getMainDatas,cityRank,merchantRank,saleRank
    } from '@/api/finance'
    export default {
      data() {
        return {
          nodes:[],
          city: [],
          activeName:'2',
          CityRankingData:{
            city:'',
            label:'2',
            type:'3',
            defaultDate:'',
            list:[]
          },
          MerchantRankingData:{
            merchant:'',
            label:'1',
            type:'1',
            defaultDate:'',
            list:[]
          },
          SaleRankingData:{
            sale:'',
            label:'2',
            type:'3',
            defaultDate:'',
            list:[]
          },
          thisQuery:{
            tabPosition: '3',
            defaultDate: '',  
          },
          chartPie: null,
          chartLine: null,
          chartColumnar: null,
          value:'',
          start:'',
          legendY:'20%',
          legendX:'15%',
          x:[],
          y:[]
          
        }
      },
      mounted() {
      this.$nextTick(() => {
          this.drawColumnar(this.CityRankingData);
        })
      },
      created(){
          this.getMainDatas();
          this.getRegionList();
          this.nodes = getNodes()
      },
      
      methods: {
        getMainDatas(){
          this.x = [];
          this.y = [];

          cityRank(this.CityRankingData).then(res => {
              this.CityRankingData.list = res.data.city_rank;
              let ll = res.data.city_rank
              for(let i=0;i<ll.length;i++){
                if(ll[i].number>0){
                  this.x.push(ll[i].city_name)
                  this.y.push(ll[i].number)
                }   
              } 
              this.drawColumnar();
          })
        },
        
        

        drawColumnar () {
                // 实例化echarts对象
                
              this.chartColumnar = echarts.init(document.getElementById('Columnar'),'shine');// 基于准备好的dom，初始化echarts实例
                // 绘制条形图
                var option = { 
                    // X轴
                    tooltip : {      
						          show: true
                    },
                    calculable : false,
                    xAxis: {
                        show:true,
                        data: this.x
                    },
                    // Y轴
                    yAxis: {
                      show:true,
                      max: (Math.max.apply(null,this.y))+5,
                      type: 'value'
                    },
                    // 数据
                    series: [
                        {
                            type: 'bar',
                            data: this.y,
                            itemStyle: {
                              normal: {
                                areaStyle: {type: 'default'}, 
                                label: {show: true,position: 'top'},
                                textStyle: { //数值样式
                                  color: 'black',
                                  fontSize: 16
                                },
                                 color: "#F2637B",
                              }
                            },
                        }, 
                    ]
                };

                this.chartColumnar.setOption(option);
        },
        getRegionList() {
          getRegion(this.rankingdata).then(response => {
            this.city = response.data 
          })
        },
        handleClickAll(tab, event) {
          this.getMainDatas();
        }, 
      }
    }
</script>


<style  scope>
    .card_box{
        width:30%;background: #fff;border-radius: 8pt;margin-top:24pt;background-repeat: no-repeat;background-size: 100% 100%;
        height:7.5%;margin-top: 24pt;margin-left: 2%;float:left;color:#fff;position: relative;
    }
    .card_title{top:8.5%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count{top:30%;left: 8.5%;font-size: 14px;position: absolute;}
    .all_count_num{font-weight: 700;font-size: 38px;}
    .cardlists{width: 83%;height: 23.4%;top:76.5%;left:8.5%;position: absolute;
                border-top:1px solid #e8e8e8;line-height: 44pt;font-size: 14px;}
    .numm{font-weight: 600;}

    .rank{width: 96%;margin-left: 2%;
      /* border:1px solid red */
      }
    .gd{float: left;color:#555658;font-size: 14px;cursor: pointer;}
    .defualt{float: left;margin-left: 20pt;}
    .gdchoose1{color:#1890FF}
    .gd .el-tabs__nav-wrap::after { background-color:#fff !important;}

    .el-date-editor--daterange.el-input, .el-date-editor--daterange.el-input__inner, .el-date-editor--timerange.el-input,
     .el-date-editor--timerange.el-input__inner{width:100% !important;}
     .el-radio-button__orig-radio:checked + .el-radio-button__inner{color:#1890FF;background-color: #fff;}
    .el-tabs--border-card{box-shadow:none;border:none;width: 348pt;height: 24pt;border:1px solid #eee}
    .el-tabs--border-card > .el-tabs__header{border-bottom: none;background-color:#fff}
    .el-tabs--border-card > .el-tabs__header .el-tabs__item{border:#DCDFE6 1px solid;width: 70pt;text-align: center;}
    /* .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active{border:#1890ff 1px solid;} */
    .el-range-editor--medium.el-input__inner{height: 30pt;margin-top: 1px;border-radius: 0;}

    .list_box{width: 90%;margin-left: 5%;height: 260pt;margin-top:40pt;overflow: auto;}
    .list_box::-webkit-scrollbar{width: 2pt;}
    .list_box::-webkit-scrollbar-thumb{width: 2pt;background: #D9EDFF;}
    .list_box::-webkit-scrollbar-button{display:none}
    .lis{width: 100%;height: 40pt;border:1px solid #fff;line-height: 40pt;font-size: 15px;color:#555658;border-bottom:1px solid #e8e8e8;}
    .num{
      width:20px;height:20px;background:#F0F2F5;
       margin-top: 13pt;
      line-height: 20px;;color:#555658;
      border-radius: 20px;text-align: center;}
    .firstt{background:#FFD13B;color:#fff;}
    .second{background:#ECECDB;color:#fff;}
    .third{background:#E6812F;color:#fff;}
    .main{width:100%;height:2100pt;background:#F0F2F5;padding-top:24pt;font-size: 12pt;color:#000;}
    .datetype{
      width: 100%;height: 32pt;
      margin-left: 2%;
    }
    .dated{
      width: 370pt;height: 100%;float: left;border:1px solid #eee
    }
    .dated .el-tabs__content{display:none;}
    .dated .el-tabs__nav-scroll{width: 370pt;}
    .grid-content{border: 1px solid #ccc;cursor: pointer;
          height: 32pt;line-height:32pt;text-align: center;}
    .pie-wrap{
        width:100%;
        height:350pt;
    }
    .title{color:#86888b;font-size: 15px;margin-left: 5%;}
    .title2{color:#1890FF;font-size: 15px;margin-left: 5%;}
    .allmoney{color:#242526;font-size: 18px;margin-left: 5%;margin-top: 8pt;font-weight: 800;}
    .one_line_box{
        width:96%;background: #fff;border-radius: 2pt;padding-top:20pt ;
        height:188pt;margin-top: 24pt;margin-left: 2%;float: left;
    }
    .two_line_box{
       width:94%;background: #fff;border-radius: 2pt;
        height:276pt;margin-top: 24pt;margin-left: 2%;float:none
    }
    .one_pie_box{
        width:96%;background: #fff;border-radius: 2pt;
        height:500pt;margin-left: 2%;float:left;padding-top:24pt;
    }
     .one_line,.line-columnar{
        width:100%;
        height:300pt;
    }
    .two_line{
       width:100%;
        height:100%;
    }
    .hr{width: 90%;margin-left: 5%;margin-top: 16pt;border:#e8e8e8 1px solid}
    .datas{width: 90%;margin-left: 5%;margin-top:20pt;}
    .datas2{width: 90%;margin-left: 5%;margin-top:16pt;line-height: 20px;}
    .labels{color:#86888b;font-size: 14px;}
    .jenos{color:#212121;font-size: 14px;font-weight:600 ;}
    .jenos2{color:#86888b;font-size: 14px;}
    .clear {clear: both;}
    
</style>